<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./jQuery.min.js"></script>
    <script>
        // 通过jQ获取索引
        jQ对象.index()




        //webAPI解决网页中动画
        //1, 通过定时器实现  
        //2, 通过自定义css动画,调用类名
        //3, 通过调用第三方动画实现




        //jQ中提供的动画
        //内置动画 : 本质上就是控制元素的隐藏和显示
        //show() ---> 显示元素
        //show方法中有3个参数,如果不设置则没有动画效果
        第一个参数: 表示速度('slow', 'normal', 'fast')字符串 或者 设置一个毫秒数
        第二个参数: 表示切换效果, 默认值 'swing' 或者 匀速'linear'
        第三个参数: 回调函数, 动画完成后执行一次该回调函数
        // hide() ---> 隐藏元素
        // hide方法中的参数使用方式与show()中的参数使用一样
        // 代码演示内置动画
        btn1.click(function () {
            div.show('fast', 'linear', function () {
                // 可以写动画执行完执行的代码
                // 没有可以不写
            })
        })
        btn2.click(function () {
            div.hide('fast', 'linear')
        })

        // jQ内置动画
        // 显示元素/隐藏元素
        jQuery对象.show(): 显示元素
        jQuery对象.hide(): 隐藏元素

        // 以滑动方式显示元素/隐藏元素
        jQuery对象.slideDown(): 作用是用来显示元素
        jQuery对象.slideUp(): 作用是用来隐藏元素

        // 通过修改元素透明度实现显示元素/隐藏元素
        jQuery对象.fadeIn(): 作用显示元素(淡入效果)
        jQuery对象.fadeOut(): 作用隐藏元素(淡出效果)





        // 设置元素透明度
        jQuery对象.fadeTo(速度, 透明度, 切换效果, fn)
        // 例:
        btn.click(function () {
            div.fadeTo(1000, 0, 'linear', function () {
            })
        })




        // 打断动画队列stop()
        // 动画会默认排队执行,前一个动画未执行完不会被打断,多数情况下需要打断
        // 通过stop()方法将动画队列停止掉,必须在动画前面调用stop()方法
        // 例:
        btn1.click(function () {
            div.stop().slideDown(3000, 'linear', function () {
            })
        })
        btn2.click(function () {
            div.stop().slideUp(3000, 'linear', function () {
            })
        })







        // jQuery设置自定义动画
        jQuery对象.animate(属性, 速度, 切换效果, 回调函数)
        // 例:
        div.click(function () {
            $(this).animate({
                'width': '400px'
            }, 2000, 'linear', function () {
                console.log(123);
            });
        })
        // 注意事项:
        // 1. 第一个参数必须以对象的方式设置
        // 2. 自定义动画中的属性不是所有的属性都支持
        // 3. 与颜色相关的属性,与2d转化或3d转化相关的属性不支持

        //如果非得使用animate设置不支持的属性
        //☞ 自己写动画效果,然后通过类名添加实现 (webAPI)
        //☞ 网上找支持的插件(jQ),必须放到jQ文件的后面





        // JQ中获取非表单元素中的内容
        jQ对象.text()
        jQ对象.html()
        // jQ中给非表单元素设置内容
        jQ对象.text(值)
        jQ对象.html(值)
        // 与innerText和innerHTML赋值效果是一样






        // 通过jQ获取表单元素中的内容
        jQ对象.val()
        // 通过jQ设置表单内容
        jQ对象.val(值)





        // jQ遍历数据的方法
        jQ对象.each(function (index, item) { })
        $.each(被遍历的数组(jQ对象数组或者定义的数组), function (index, item) { })




    </script>
</body>

</html>